import { SlateRange, SlateEditor, SlateNode } from '@wangeditor/editor';
import { IModalMenu, IDomEditor, genModalInputElems, genModalButtonElems } from '@wangeditor/editor';
import { genRandomStr, isMenuDisabled, insertLink } from '../utils';

/**
 * 生成唯一的 DOM ID
 */
function genDomID(): string {
	return genRandomStr('w-e-insert-link');
}

class InsertLineMenu implements IModalMenu {
	readonly title = '插入链接';
	readonly iconSvg =
		'<svg t="1723710196792" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4658" width="200" height="200"><path d="M910.496 213.536C804.16 82.208 611.488 61.952 480.128 168.32l-100.768 81.6 50.336 62.176 100.768-81.6a225.984 225.984 0 1 1 284.448 351.264l-107.968 87.424 50.336 62.176 107.968-87.424a305.984 305.984 0 0 0 45.248-430.4zM516.352 823.552a225.984 225.984 0 1 1-284.448-351.264l110.976-89.856-50.336-62.176-110.976 89.856C50.24 516.448 29.984 709.152 136.32 840.48c106.336 131.328 299.04 151.584 430.368 45.248l105.12-85.12-50.336-62.176-105.12 85.12z" p-id="4659"></path><path d="M676.16 353.28l51.232 61.44-343.552 286.304-51.2-61.44z" p-id="4660"></path></svg>';
	readonly tag = 'button';
	readonly showModal = true;
	readonly modalWidth = 300;
	private content!: HTMLDivElement;
	private readonly textInputId = genDomID();
	private readonly urlInputId = genDomID();
	private readonly buttonId = genDomID();

	constructor() {}

	getValue(editor: IDomEditor): string | boolean {
		return '';
	}

	isActive(editor: IDomEditor): boolean {
		return false;
	}

	exec(editor: IDomEditor, value: string | boolean) {}

	isDisabled(editor: IDomEditor): boolean {
		return isMenuDisabled(editor);
	}

	getModalPositionNode(editor: IDomEditor): SlateNode | null {
		return null;
	}

	getModalContentElem(editor: IDomEditor): Element {
		const { selection } = editor;
		const { textInputId, urlInputId, buttonId } = this;

		// 获取 input button elem
		const [textContainerElem, inputTextElem] = genModalInputElems('链接文本', textInputId);
		const [urlContainerElem, inputUrlElem] = genModalInputElems('链接地址', urlInputId);
		const [buttonContainerElem, buttonElem] = genModalButtonElems(buttonId, '确认');

		const comfirmBtn = buttonElem as HTMLButtonElement;
		const inputText = inputTextElem as HTMLInputElement;
		const inputURL = inputUrlElem as HTMLInputElement;

		if (this.content == null) {
			const $content = document.createElement('div');
			this.content = $content;
		}

		const $content = this.content;
		//先清空内容
		while ($content.firstChild) {
			$content.removeChild($content.firstChild);
		}

		$content.appendChild(textContainerElem);
		$content.appendChild(urlContainerElem);
		$content.appendChild(buttonContainerElem);
		comfirmBtn.addEventListener('click', (e: MouseEvent) => {
			e.preventDefault();
			// const text = ($content.querySelector(`#${textInputId}`) as HTMLInputElement)?.value
			// const url = ($content.querySelector(`#${urlInputId}`) as HTMLInputElement)?.value
			const text = inputText.value;
			const url = inputURL.value;
			insertLink(editor, text, url);
		});
		// 设置 input val
		if (selection == null || SlateRange.isCollapsed(selection)) {
			// 选区无内容
			inputText.value = '';
		} else {
			// 选区有内容
			const selectionText = SlateEditor.string(editor, selection);
			inputText.value = selectionText;
		}

		inputURL.value = '';
		// focus 一个 input（异步，此时 DOM 尚未渲染）
		setTimeout(() => {
			inputText.focus();
		});
		return this.content;
	}
}

export default InsertLineMenu;
